import { BaseUpload } from '@/components/Upload'
import React, { useEffect, useState } from 'react'
import styles from './index.module.less'
import plusIcon from '@/resource/plus.png'
import { getData, postData, putData } from '@/servers/http'
import { api } from '@/servers/api'
import { useParams, history, useLocation } from 'umi'
import TaskFinshModal from '@/components/TaskFinishModal'

function UploadPic() {
    const [value, setValue] = useState<any>([])
    const [info, setInfo] = useState<any>()
    const [visible, setVisible] = useState<any>()
    const [waitVisible, setWaitVisible] = useState<boolean>(true)
    const { id } = useParams<any>()
    const {
        query: { isSubmitTraining },
    }: any = useLocation()
    console.log(isSubmitTraining)

    /** 获取详情 */
    const getInfo = () => {
        getData(`${api.userBarriersById}${id}`).then(res => {
            console.log(res)
            const { detail } = res.data
            setInfo(res.data)
            if (detail) {
                setValue([detail])
            }
        })
    }

    /** 提交 */
    const handleFinish = () => {
        if (isSubmitTraining === 'true') {
            history.push(`/level?id=${info?.scene_id}`)
            return
        }

        const method = info.detail ? putData : postData
        const apiPath = info.detail ? api.userBarriersBatchUpdate : api.userBarriersBatchInput
        const { name, url } = value?.[0] || {}
        method(`${apiPath}${id}`, {
            name,
            url,
        }).then(() => {
            if (!info.detail) {
                setVisible(true)
            } else {
                history.push(`/level?id=${info?.scene_id}`)
            }
        })
    }

    useEffect(() => {
        getInfo()
    }, [])

    if (!info) {
        return null
    }
    return (
        <div className={styles.container}>
            <div className={styles.title}>
                关卡{info?.sort}:{info?.name}
            </div>
            {waitVisible && (
                <div className={styles.wait_text}>
                    <span>关卡功能正在紧锣密鼓的开发中，尽请期待~</span>
                    <div
                        onClick={() => {
                            setWaitVisible(false)
                        }}
                    />
                </div>
            )}

            <div className={styles.sub_title}>上传作业：</div>

            <BaseUpload
                className={styles.upload_wrapper}
                maxCount={1}
                value={value}
                onChange={(res: any) => {
                    setValue(res)
                }}
                queryParams={{ type: 'background' }}
                maxSize={20}
                onDelete={() => isSubmitTraining === 'false'}
            >
                <div className={styles.feedbask_camera}>
                    <img src={plusIcon} className={styles.feedbask_img} />
                </div>
            </BaseUpload>
            <div className={styles.tips}>可拍照上传作业，或选择相册照片进行上传。支持上传png、jpg、jpeg的图片，文件大小≤20mb.</div>

            {!!value.length && isSubmitTraining === 'false' && (
                <div className={styles.finish_btn} onClick={handleFinish}>
                    任务完成
                </div>
            )}

            <TaskFinshModal visible={visible} levelInfo={info} onClose={() => setVisible(false)} />
        </div>
    )
}

export default UploadPic
